<script setup>
import { ref, reactive, onMounted } from "vue";
import { saveEnterprise,updateEnterprise } from '@/api/platform/enterprise.js';
import { ElMessage } from "element-plus";
import {queryTree} from '@/api/platform/category.js'

//声明事件
const emits = defineEmits(["close", "refresh"]);

//表单引用，要求响应式对象与表单数据ref的值保持一致
const ruleFormRef=ref(null)

//校验属性的定义
const rules = reactive({
  name:[
    {
      required: true,
    message: "请输入企业名称",
      trigger: "blur"
    }
  ]
})

//类别编码
const tempcode=ref('')
let casref = ref(null)
//联级列表
let options = ref('')
//联级配置
let propconfig= {
  value:"code",
  label:"name"
}
//保存事件
async function save() {
  if (tempcode.value.length == 0) {
     ElMessage({
      message: "请选择类目！",
      type: "warning"
    });
    return;
  }
  // //调用表单校验 异步的方式
let valid = await ruleFormRef.value.validate(valid => { });
if (!valid)
  return;

  let res ;
  //判断当前操作是保存还是修改
  if (ruleForm.value.id) {
    //说明是修改
    res = await updateEnterprise(ruleForm.value);
  } else {
    res = await saveEnterprise(ruleForm.value);
  }
//验证通过 提交表单
  //等待接口数据返回以后再执行

  if (res.code == 200) {
     ElMessage({
      message: "保存成功",
      type: "success"
    });
    //关闭窗口
    cls();
    //通知父窗口刷新数据
    emits("refresh");
  }
}

//类目改变函数
function handleChange(v) {
  let len = v.length - 1;
  ruleForm.value.categoryCode = v[len];
  let tmp = casref.value.getCheckedNodes();
  ruleForm.value.categoryName = tmp[0].label;
}
//声明属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//表单数据
const ruleForm = ref({
  name: "",
  user: "",
  mobile: "",
  address: "",
  categoryCode: "",
  categoryName: ""
});

//关闭事件
function cls() {
  //抛出自定义事件
  emits("close");
}

//查询类别树
async function qurryCategory() {
  let res = await queryTree();
  if (res.code == 200) {
    options.value = res.data;
  }
}

//初始函数
function init(data) {
  if (data) {
    //说明是修改
    tempcode.value = data.categoryCode;
    ruleForm.value=data;
  } else {
    ruleForm.value={
  name: "",
  user: "",
  mobile: "",
  address: "",
  categoryCode: "",
  categoryName: ""
    };
    tempcode.value = "";
  }
}
//生命周期函数
onMounted(()=>{
  qurryCategory()
})

defineExpose({init})
</script>

<template>
  <div>
    <el-dialog
      :model-value="visible"
      title="企业资料信息"
      width="500"
      :close-on-click-modal="false"
      @close="cls"
    >
      <!-- 表单 -->
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name"
          :disabled="ruleForm.id!=undefined"/>
        </el-form-item>
         <el-form-item label="企业类目" >
           <el-cascader
           ref="casref"
      v-model="tempcode"
      :options="options"
      :props="propconfig"
      @change="handleChange"
    />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="ruleForm.user" />
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="ruleForm.mobile" />
        </el-form-item>

        <el-form-item label="公司地址">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="save" type="primary">保存</el-button>
          <el-button @click="cls">不保存关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
